<template>
	<view >
		<view v-for="item in appointments" :key="item.id">
			<uni-card :title="users.find(v => v.id===item.counselorId)?users.find(v => v.id===item.counselorId).nickName:''" :extra="item.room">
				<view>今日咨询时间：{{item.exactTime}}</view>
				<view>
					<!-- <button type="primary" style="margin-top: 10rpx;" @click="sign(item.id)" >预约</button> -->
					<button  type="primary" style="margin-top: 10rpx;"
						@click="dialogToggle(item.sid)">取消预约</button>
				</view>
			</uni-card>
		</view>
		
		<view  v-if="appointments.length === 0" style="text-align: center; font-size: 48rpx; height: 100vh; line-height: 100vh; color:rgb(127,127,126) ;">
			今日还没预约咨询哦！
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="再次确认" content="你将取消预约!"
					@confirm="dialogConfirmDel" ></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				appointments:[],
				users:[],
				sid:null,
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user');
			this.loading();
		
		},
		methods: {
			loading(){
				this.request({
					url: '/user'
				}).then(res => {
					this.users = res.data;				
				});
				this.request({
					url: `/appointmentSign/page/front/${this.user.id}`
				}).then(res => {
					this.appointments = res.data;
				});
			},
			dialogToggle(appointmentSignId) {
				this.sid=appointmentSignId;
				this.$refs.alertDialog.open();
			},
			dialogConfirmDel() {
					this.request({
						url: `/appointmentSign/${this.sid}`,
						method: 'DELETE'
					}).then(res => {
						if (res.code === '0') {
							uni.showToast({
								title: '取消成功'
							})
						}
						this.loading();
					});
			},
		}
	}
</script>

<style>

</style>
